/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-07-15 17:09:33
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-09-08 17:34:43
 */
import React, { CSSProperties, PureComponent } from "react";
import "./index.scss";
interface Selector {
  text: string | number;
  value: string | number;
  active?: boolean;
}
interface propsType {
  type: "choice" | "select";
  data: Selector[];
  // defaultActiveKey?: number;
  defaultValue?: number[] | string[] | number | string;
  value?: Selector[] | number | string;
  onChange?: (selected) => void;
  style?: CSSProperties;
}

interface StateType {
  data: Selector[];
}

class ButtonGroup extends React.Component<propsType, StateType> {
  static defaultProps: { type: string; style: CSSProperties };
  constructor(props: propsType) {
    super(props);
    this.state = {
      data: props.data.length !== 0 ? this.getData(props.data, !!props.value ? props.value : props.defaultValue) : []
    };
  }

  componentWillReceiveProps(nextProps: Readonly<propsType>) {
    console.log('nextProps', nextProps);
    const nextValue = nextProps.value !== this.props.value ? nextProps.value : this.props.value;
    if (nextProps.data.length !== this.state.data.length || JSON.stringify(nextProps.data) !== JSON.stringify(this.state.data)) {
      this.setState({
        data: this.getData(nextProps.data, nextValue ? nextValue : nextProps.defaultValue)
      });
    }
    if ((!!nextProps.value && !!this.props.value && nextProps.value !== this.props.value)) {
      if (!!nextValue) {
        this.setState({
          data: this.getData(nextProps.data, nextValue ? nextValue : nextProps.defaultValue)
        });
      }
    }
  }

  getData = (data, value) => {
    if (value) {
      const deep = data.slice(data);
      if (typeof value === "string" || typeof value === "number") {
        const cur = deep.findIndex((item) => item.value === value);
        if (cur >= 0) {
          deep[cur].active = true;
        }
      } else if (value instanceof Array) {
        for (let i = 0; i < value.length; i++) {
          deep.forEach((item) => {
            if (item.value === value[i]) {
              item.active = true;
            } else {
              item.active = false;
            }
          });
        }
      }
      return deep;
    }
    return data;
  };

  itemClick = (index: number, item: Selector) => {
    const deep = this.state.data.slice();
    if (this.props.type === "choice") {
      deep.forEach((item) => (item.active = false));
      deep[index].active = true;
      this.setState({
        data: deep
      });
    } else {
      deep[index].active = !item.active;
      this.setState({
        data: deep
      });
    }

    if (this.props.onChange) {
      this.props.onChange(
        this.props.type === "choice" ? item : deep.filter((item) => item.active)
      );
    }
  };

  renderList = () => {
    return this.state.data.map((item, index: number) => {
      return (
        <div key={index} className="item-wrap">
          <div
            className={`item ${item.active === true ? "active" : "default"}`}
            onClick={() => {
              this.itemClick(index, item);
            }}
          >
            <div className="tab">{item.text}</div>
          </div>
        </div>
      );
    });
  };

  render() {
    console.log(222, this.props)
    return (
      <div className="button-group-wrap" style={{ ...this.props.style }}>
        <div className="button-group">{this.renderList()}</div>
      </div>
    );
  }
}
ButtonGroup.defaultProps = {
  type: 'choice',
  style: {}
};

export default ButtonGroup;
